<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<style>
    body::-webkit-scrollbar {
        display: none;
    }
</style>
<head>
    <meta charset="UTF-8">
    <title>数据分析</title>
    <script th:src="@{/static/jquery-2.1.4.js}" type="text/javascript" charset="utf-8"></script>
    <script th:src="@{/static/echarts.min.js}" type="text/javascript" charset="utf-8"></script>

</head>
<body>
<style>
    #bg-container{ width: 99%;height: auto;position: absolute}
    .inner-container{background-color: rgba(169,169,169,0.1);width: 80%;height: 550px;margin: auto;margin-top: 100px;
                position: relative;border-radius: 20px;
    }
    .echarts-container{ margin:auto;height: 100%;}
    .echarts-one{width: 90%;}
    .echarts-left{width: 45%;position: absolute;left:5%}
    .echarts-right{width: 45%;position: absolute;right: 5%}
</style>


<div id="bg-container">
    <div class="inner-container">
        <div class="echarts-container"  id="order_data"></div>
    </div>
</div>

<script type="text/javascript" th:inline="javascript">
    var orderDataId = document.getElementById('order_data');
    var orderDataE = echarts.init(orderDataId);

    var orderData;

    orderData = {
        title: {
            text: '订单数据',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left'
        },
        series: [
            {
                name: '订单',
                type: 'pie',
                radius: '50%',
                data: [
                    { value: 0, name: '男' },
                    { value: 0, name: '女' }
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    $.post(
        [[${#request.getContextPath()}]]+'/order/queryEchartsData',
        function(jsonObj) {
           console.log(jsonObj);
            var tags=[];
            for(var index in jsonObj){
                var v=jsonObj[index];
                var type;
                switch (v.status) {
                    case 1:
                        type = "未付款"
                        break;
                    case 2:
                        type = "待发货"
                        break;
                    case 3:
                        type = "待收货"
                        break;
                    case 4:
                        type = "交易成功"
                        break;
                    case 0:
                        type = "已取消"
                        break;
                }
                var temp={
                    value: v.num, name: type
                }
                tags.push(temp);
            }
            orderData.series[0].data=tags;
            orderDataE.setOption(orderData);
        },
        'json'
    );



</script>
</body>
</html>
